<!-- 上传文件组件 -->
<template>
  <div class="m-uploadFile">
    <lessoUploader
      ref="lsUpload"
      :baseUrl="baseUrl"
      :userInfo="userInfo"
      :deleteBtn="true"
      @fileError="fileError"
      @fileExceed="fileExceed"
      @fileAdded="fileAdded"
      @fileRemoved="fileRemoved"
      @fileSuccess="fileSuccess"
      @overSize="overSizeHandler"
      :accept="config.accept"
      :multiple="config.multiple"
      :limits="config.limits"
      :maxSize="config.maxSize"
      :allowDuplicateUploads="false"
      @deleteFile="onFileDelete"
      v-if="showBtn"
    >
      <div slot="upload-btn">
        <div class="slot_btn">选择附件</div>
      </div>
    </lessoUploader>
    <div v-if="files.length>0">
      <div
        class="uploaded_files"
        v-for="(file,index) in files"
        :key="index"
        @mouseenter="file.iconShow=true"
        @mouseleave="file.iconShow=false"
        @click="downLoadFile(file)"
      >
        <div class="name" :title="file.name">
          <i class="el-icon-document"></i>
          {{file.name}}
        </div>
        <span class="state_icon">
          <i class="el-icon-circle-check" style="color:#67c23a" v-show="!file.iconShow"></i>
          <i class="el-icon-close" v-show="file.iconShow" @click.stop="deletedFile(file)"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import lessoUploader from 'lesso-file-upload/lessoUploader'
import apienv from '@/api/env'
import Msg from '@/public/message.js'
import constant from "@/public/constant";
import downLoadFileFunc from "@/public/downLoadFile"
export default {
  props: {
    files: {
      type: Array,
      default () {
        return []
      }
    },
    config: {
      type: Object,
      default () {
        return {
          limits: 1,
          accept: '',
          maxSize: 20971520,
          multiple: true
        }
      }
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      fileList: [],
      userInfo: {
        userName: this.$global.user.employeeName,
        userId: this.$global.user.id,
        groupName: 'SRM'
      },
      baseUrl: apienv[constant.appenv].srm + 'uploadFastdfs/',
    }
  },
  beforeMount () {
    //  合并已上传文件
    // this.fileList = this.files
  },
  methods: {
    //清空组件文件列表
    clearFileList () {
      console.log(this.$refs.lsUpload)
      this.$refs.lsUpload.initFileList()
      this.fileList = []
    },
    downLoadFile (params) {
      var obj = {};
      obj.viewPath = params.url;
      obj.groupName = 'TEST';
      obj.fileName = ''
      if (params.url.indexOf('SRM') > -1) {
        obj.groupName = 'SRM'
      } else if (params.url.indexOf('SIGN') > -1) {
        obj.groupName = 'SIGN'
      } else if (params.url.indexOf('TEST') > -1) {
        obj.groupName = 'TEST'
      }
      downLoadFileFunc(obj, params.name)
    },
    // 文件通过检查回调
    fileAdded (file) {
      for (var i in this.fileList) {
        if (this.fileList[i].md5 == file.md5)
          file.cancel()
      }
      let obj = {
        groupName: 'SRM',
        fileMd5: '',
        uid: this.$global.user.id
      }
      if (this.files.length > 0) {
        obj.fileMd5 = this.files[0].md5
        this.$http.deletedFastdfsFile(obj).then(({ data }) => {
          if (data.code == 200) {
            // Msg.showSuccessMsg('文件已删除')
            this.fileList = []
            this.$emit('fileChange', this.fileList)
          } else {
            Msg.showErrorMsg(data.msg)
          }
        }).catch(err => {
          Msg.showErrorMsg(err.data.message)
        })
      }
    },
    // 删除文件
    onFileDelete (file, callback) {
      this.$confirm("是否删除该附件？", "消息提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        distinguishCancelAndClose: true
      }).then(() => {
        callback(true)
      }).catch(() => { })
    },
    // 编辑时删除文件
    deletedFile (file, index) {
      this.$confirm("是否删除该附件？", "消息提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        distinguishCancelAndClose: true
      }).then(() => {
        let obj = {
          groupName: 'SRM',
          fileMd5: file.md5,
          uid: this.$global.user.id
        }
        this.$http.deletedFastdfsFile(obj).then(({ data }) => {
          if (data.code == 200) {
            Msg.showSuccessMsg('文件已删除')
            this.fileList.splice(index, 1)
            this.$emit('fileChange', this.fileList)
          } else {
            Msg.showErrorMsg(data.msg)
          }
        }).catch(err => {
          Msg.showErrorMsg(err.data.message)
        })
      })
    },
    // 文件上传成功回调
    fileSuccess (file, message, chunk) {
      if (message.code === 200) {
        var obj = {
          creator: this.$global.user.loginName,
          creatorId: this.$global.user.id,
          resourceType: 1
        };
        obj.size = file.size;
        obj.url = file.viewPath;
        obj.md5 = file.md5;
        obj.name = file.name;
        this.fileList.push(obj);
        this.$emit('fileChange', this.fileList)
      }
    },

    fileRemoved (file, response) {
      if (response.code === 200) {
        for (let i = this.fileList.length - 1; i >= 0; i--) {
          if (this.fileList[i].md5 == file.md5)
            this.fileList.splice(i, 1);
        }
        this.$emit('fileChange', this.fileList)
      }
    },
    // 文件超出大小回调
    overSizeHandler (file) { // 文件过大回调
      this.$message.warning("选择的文件大小不能超过20M")
    },
    //文件类型不合法
    onInvalidFile (file) {
      this.$message.warning('上传文件类型只支持.pdf/.doc/.docx/.xls/.xlsx/.txt')
    },
    // 文件上传失败回调
    fileError (file, message, chunk) {
      message = JSON.parse(message)
      this.$message.error(message.msg);
    },
    //文件个数超出限制
    fileExceed (files, fileList) {
      this.$message.warning('上传文件个数超出限制,最多只能上传1个文件')
    },
  },
  components: {
    lessoUploader
  }
}
</script>

<style>
</style>